import React,{Component} from 'react';
import { 
    View, 
    ScrollView,
    StyleSheet,
    FlatList, 
    Image, 
    Text,
    Alert,
    TouchableWithoutFeedback, 
    StatusBar,
} from 'react-native';
import Header from './header/Header';
import Dialog from './dialog/index'
export default class EditAddress extends Component {

    constructor(props) {
        super(props);
        this.state = {
            lists: [
                {
                    id: 1,
                    name: '林帅帅',
                    mobile: '13016202445',
                    address: '河北省邯郸市邯山区某某某某街道某某某某村某某某某座',
                    isDefault: true,
                },
                {
                    id: 2,
                    name: '李帅帅',
                    mobile: '18085216458',
                    address: '广东省深圳市南山区某某某某街道某某某某村某某某某座',
                    isDefault: false,
                },
                {
                    id: 3,
                    name: '陈帅帅',
                    mobile: '17785624526',
                    address: '海南省琼海市嘉积镇某某某某街道某某某某村某某某某座',
                    isDefault: false,
                },
                
            ],
            // 将要删除的地址id
            delAddrssId: '',
            // 控制是否显示confirm
            showConfirm: false
        };
        this.renderAddressItem = this.renderAddressItem.bind(this);
        this.setDefaulst = this.setDefaulst.bind(this);
    }

    // 设置默认地址
    setDefaulst(data){
        for(let i=0;i<this.state.lists.length;i++){
            if(i==data){
                this.state.lists[i].isDefault = true;
            }else {
                this.state.lists[i].isDefault = false;
            }
        }
        this.setState({
            lists: this.state.lists
        });
    }

    delAddress(aid){
        this.setState({
            delAddrssId: aid,
            showConfirm: true,
        });
    }

    confirmCallBack(index){
        let info = index == 0?'点击了确定':'点击了取消'
        this.setState({
            showConfirm: false,
        });
    }

    // 鞋匠资讯
    renderAddressItem() {
        // 数组
        let itemAry = [];
        // 遍历
        let _this = this;
        for (let i = 0; i<_this.state.lists.length; i++) {
            itemAry.push(
                <View style={{marginBottom: 10, backgroundColor: '#fff'}} key={i}>
                    <TouchableWithoutFeedback>
                        <View style={{flexDirection: 'row', height: 64, paddingLeft: 12, paddingRight: 12, paddingTop: 10, paddingBottom: 10,borderBottomWidth: 1, borderColor: '#e9e9e9'}}>
                            <View style={{flex: 1, justifyContent: 'space-between'}}>
                                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                                    <Text style={{fontSize: 14, color: '#262626'}}>{_this.state.lists[i].name}</Text>
                                    <Text style={{fontSize: 14, color: '#262626'}}>{_this.state.lists[i].mobile}</Text>
                                </View>
                                <Text style={{fontSize: 14, color: '#262626'}} numberOfLines={1}>{_this.state.lists[i].address}</Text>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between',alignItems: 'center',paddingTop: 8, paddingBottom: 8, paddingLeft: 12, paddingRight: 12}}>
                        {
                            _this.state.lists[i].isDefault?
                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                <Image style={{
                                    width: 16,
                                    height: 16,
                                    marginRight: 5,
                                }} source={require('../images/address-active.png')}/>
                                <Text style={{fontSize: 13, color: '#006ce9'}}>默认地址</Text>
                            </View>
                            :
                            <TouchableWithoutFeedback onPress={()=>this.setDefaulst(i)}>
                                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                    <Image style={{
                                        width: 16,
                                        height: 16,
                                        marginRight: 5,
                                    }} source={require('../images/address.png')}/>
                                    <Text style={{fontSize: 13, color: '#626262'}}>设为默认</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        }
                        <View style={{flexDirection: 'row', alignItems: 'center'}}>
                            <TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate('EditAddress',
                                {
                                    isDefault: true,
                                    id: _this.state.lists[i].id,
                                    name: '林帅帅',
                                    mobile: '18084621629',
                                    addressId: 10,
                                    addressInfo: '广东省 深圳市 宝安区',
                                    address: '宝云路亨林大厦',
                                }
                            )}>
                                <View>
                                    <Image style={{
                                        width: 18,
                                        height: 18,
                                    }} source={require('../images/editIco.png')}/>
                                </View>
                            </TouchableWithoutFeedback>
                            <TouchableWithoutFeedback onPress={()=>this.delAddress(_this.state.lists[i].id)}>
                                <View style={{marginLeft: 20, marginRight: 5}}>
                                    <Image style={{
                                        width: 18,
                                        height: 18,
                                    }} source={require('../images/delIco.png')}/>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>
                    </View>
                </View>
            )
        }
        return itemAry;
    }

    render() {
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#eaeaea'
            }}>
                <Header isShowBack={true} title='收货地址' goBack={goBack} />

                <View style={{flex: 1, paddingBottom: 44}}>
                    <ScrollView>
                        {this.renderAddressItem()}
                    </ScrollView>
                </View>
                <TouchableWithoutFeedback onPress={()=>navigate('AddNewAddress')}>
                    <View style={{position: 'absolute', left: 0, right: 0, bottom: 0, height: 44, justifyContent: 'center', alignItems: 'center', backgroundColor: '#006ce9'}}>
                        <Text style={{fontSize: 14, color: '#fff'}}>新增收货地址</Text>
                    </View>
                </TouchableWithoutFeedback>

                <Dialog 
                    // Dialog的类型
                    type='confirm'
                    // 控制弹框的显示
                    show={this.state.showConfirm}
                    // 弹框的内容
                    content='确定删除该地址？'
                    // confirm点击的回调
                    confirmCallBack={this.confirmCallBack.bind(this)}
                    // 定义左右按钮的文字
                    leftBtn='取消'
                    rightBtn='确定删除'

                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    nav: {
        height: 44, 
        backgroundColor: '#fff', 
        paddingLeft: 15, 
        paddingRight: 15, 
        paddingTop: 6, 
        paddingBottom: 6,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    }
});